<template>
<j-modal :title="title" :width="width" :visible="showPorductList" :confirmLoading="confirmLoading" @ok="handleOk" @cancel="handleCancel" cancelText="关闭">
    <a-spin :spinning="confirmLoading">
        <!-- 计算选中个数
        <span style="margin-left: 8px">
            <template v-if="hasSelected">{{ `Selected ${selectedRowKeys.length} items` }}</template>
        </span> -->
        <a-table v-if="otherData.radio" :columns="columns" :data-source="dataSource" bordered>
            <template v-for="elem in columnList" :slot="elem" slot-scope="text, record">
                <div :key="elem">
                    <a-input v-if="record.editable" style="margin: -5px 0" :value="text" @change="(e) => handleChange(e.target.value, record, elem)" />
                    <template v-else>
                        {{ text }}
                    </template>
                </div>
            </template>
            <template slot="operation" slot-scope="text, record">
                <div class="editable-row-operations">
                    <span class="btnGroup" v-if="record.editable">
                        <a @click="() => save(record.key)">确认</a>
                        <a-popconfirm title="确认取消?" @confirm="() => cancel(record)">
                            <a>取消</a>
                        </a-popconfirm>
                    </span>
                    <span v-else>
                        <a :disabled="editingKey !== ''" @click="() => edit(record)">编辑</a>
                    </span>
                </div>
            </template>
        </a-table>
        <a-table v-else :columns="columns" :data-source="dataSource" :row-selection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }" bordered>
            <template v-for="elem in columnList" :slot="elem" slot-scope="text, record">
                <div :key="elem">
                    <a-input v-if="record.editable" style="margin: -5px 0" :value="text" @change="(e) => handleChange(e.target.value, record, elem)" />
                    <template v-else>
                        {{ text }}
                    </template>
                </div>
            </template>
            <template slot="operation" slot-scope="text, record">
                <div class="editable-row-operations">
                    <span class="btnGroup" v-if="record.editable">
                        <a @click="() => save(record.key)">确认</a>
                        <a-popconfirm title="确认取消?" @confirm="() => cancel(record)">
                            <a>取消</a>
                        </a-popconfirm>
                    </span>
                    <span v-else>
                        <a :disabled="editingKey !== ''" @click="() => edit(record)">编辑</a>
                    </span>
                </div>
            </template>
        </a-table>
    </a-spin>
</j-modal>
</template>

<script>
import '@/assets/less/TableExpand.less'
import {
    editProduction
} from '@/api/manage'
export default {
    name: 'Production',
    props: {
        //造粒领料所需参数
        mainId: {
            type: String,
            default: '',
        },
        showPorductList: {
            type: Boolean,
            default: false,
        },
        sendData: {
            type: Array,
            default: [],
        },
        columns: {
            type: Array,
            default: [],
        },
        columnList: {
            type: Array,
            default: [],
        },
        otherData: {
            type: Object,
            default: {},
        },
    },
    data() {
        return {
            limit: false,
            width: 1300,
            title: '批量生产',
            confirmLoading: false,
            editableData: {},
            selectedRowKeys: [],
            //选中数据
            selectionRows: [],
            editingKey: '',
            dataSource: [],
            cacheData: [],
        }
    },
    watch: {
        sendData() {
            this.$set(this, 'dataSource', this.sendData)
            this.$set(this, 'cacheData', this.sendData)
        },
    },
    // computed: {
    //     hasSelected() {
    //         return this.selectedRowKeys.length > 0;
    //     },
    // },
    methods: {
        onSelectChange(selectedRowKeys, selectionRows) {
            this.selectedRowKeys = selectedRowKeys;
            this.selectionRows = selectionRows;
        },
        close() {
            this.$emit('hidden', false)
            this.confirmLoading = false
            this.selectionRows = [];
            this.selectedRowKeys = [];
        },
        async handleOk() {
            let result = [];
            if (this.otherData.radio) {
                result = await editProduction(this.otherData.url, this.dataSource)
            } else {
                if (this.selectedRowKeys.length == 0) {
                    this.$message.warning('请选择数据!');
                    return false;
                }
                this.selectionRows.forEach((elem) => {
                    let obj = {
                        id: '',
                        pickingId: this.mainId,
                        inventoryId: elem.id,
                    }
                    Object.assign(elem, obj)
                })
                result = await editProduction(this.otherData.url, this.selectionRows)
            }
            if (result.code === 200) {
                this.$message.success('修改成功!')
                this.selectionRows = [];
                this.selectedRowKeys = [];
                this.$emit('Success')
            } else {
                this.$message.error('服务器未响应!')
            }
            this.close()
        },
        handleCancel() {
            this.close()
        },
        handleChange(value, record, column) {
            let key = record.key;
            //当表格支持多选时要走这里
            if (record.number) {
                if (value <= record.number) {
                    const newData = [...this.dataSource]
                    const target = newData.filter((item) => key === item.key)[0]
                    if (target) {
                        target[column] = value
                        this.dataSource = newData
                    }
                } else {
                    this.$message.warning('剩余数量不足!')
                }
            } else {
                const newData = [...this.dataSource]
                const target = newData.filter((item) => key === item.key)[0]
                if (target) {
                    target[column] = value
                    this.dataSource = newData
                }
            }
        },
        edit(record) {
            let key = record.key;
            //当表格支持多选时要走这里
            if (record.number) {
                let {
                    selectedRowKeys,
                    selectionRows
                } = this;
                if (selectedRowKeys.indexOf(key) == -1) {
                    selectedRowKeys.push(key);
                    selectionRows.push(record)
                }
                this.onSelectChange(selectedRowKeys, selectionRows);
            }
            const newData = [...this.dataSource]
            const target = newData.filter((item) => key === item.key)[0]
            this.editingKey = key
            if (target) {
                target.editable = true
                this.dataSource = newData
            }
        },
        save(key) {
            const newData = [...this.dataSource]
            const newCacheData = [...this.cacheData]
            const target = newData.filter((item) => key === item.key)[0]
            const targetCache = newCacheData.filter((item) => key === item.key)[0]
            if (target && targetCache) {
                delete target.editable
                this.dataSource = newData
                Object.assign(targetCache, target)
                this.cacheData = newCacheData
            }
            this.editingKey = ''
        },
        cancel(record) {
            let key = record.key;
            if (record.number) {
                let _index = this.selectedRowKeys.indexOf(key);
                if (_index != -1) {
                    this.selectedRowKeys.splice(_index, 1)
                    this.selectionRows.splice(_index, 1)
                }
            }
            const newData = [...this.dataSource]
            const target = newData.filter((item) => key === item.key)[0]
            this.editingKey = ''
            if (target) {
                Object.assign(target, this.cacheData.filter((item) => key === item.key)[0])
                delete target.editable
                this.dataSource = newData
            }
        },
    },
}
</script>

<style scoped>
.ant-input {
    text-align: center;
}

.editable-row-operations {
    text-align: center;
}

.btnGroup {
    display: flex;
    align-items: center;
    justify-content: space-around;
}
</style>
